<template>
  <div class="content">
    <div class="herdertop">
      <img src="../assets/top.png" alt="" class="topImg" />

      <el-breadcrumb separator="/">
        <el-breadcrumb-item>服务订单管理</el-breadcrumb-item>

        <el-breadcrumb-item>订单详情</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="center" style="padding-top: 0px;">
      <div class="hander">订单详情</div>
      <div class="orderList">
        <!-- 主体状态条 -->

        <div class="entirety">
          <p class="fist">订单状态</p>

          <!-- 待支付已取消 -->

          <div v-if="show1" style="width: 990px;">
            <el-steps :space="165" :active="2">
              <el-step title="待支付"></el-step>

              <el-step title="已取消"></el-step>
            </el-steps>

            <el-descriptions class="bonten" :column="6" direction="vertical">
              <el-descriptions-item label="创建时间">{{
                tabledata.createTimeOrder
              }}</el-descriptions-item>

              <el-descriptions-item label="取消时间">{{
                orderTimes
              }}</el-descriptions-item>
            </el-descriptions>
          </div>

          <!-- 待支付已关闭 -->

          <div v-if="show11" style="width: 990px;">
            <el-steps :space="165" :active="2">
              <el-step title="待支付"></el-step>

              <el-step title="已关闭"></el-step>
            </el-steps>

            <el-descriptions class="bonten" :column="6" direction="vertical">
              <el-descriptions-item label="创建时间">{{
                tabledata.createTimeOrder
              }}</el-descriptions-item>

              <el-descriptions-item label="取消时间">{{
                orderTimes
              }}</el-descriptions-item>
            </el-descriptions>
          </div>

          <!-- 待派单已取消 -->

          <div v-if="show2" style="width: 990px;">
            <el-steps :space="165" :active="4">
              <el-step title="待支付"></el-step>

              <el-step title="待派单"></el-step>

              <el-step title="已取消"></el-step>
            </el-steps>

            <el-descriptions class="bonten" :column="6" direction="vertical">
              <el-descriptions-item label="创建时间">{{
                tabledata.createTimeOrder
              }}</el-descriptions-item>

              <el-descriptions-item label="支付时间">{{
                tabledata.paymentTime
              }}</el-descriptions-item>

              <el-descriptions-item label="取消时间">{{
                orderTimes
              }}</el-descriptions-item>
            </el-descriptions>
          </div>

          <!-- 待派单退款中 -->

          <div v-if="show3" style="width: 990px;">
            <el-steps :space="165" :active="5">
              <el-step title="待支付"></el-step>

              <el-step title="待派单"></el-step>

              <el-step title="退款中"></el-step>
            </el-steps>

            <el-descrip tions class="bonten" :column="6" direction="vertical">
              <el-descriptions-item label="创建时间">{{
                tabledata.createTimeOrder
              }}</el-descriptions-item>

              <el-descriptions-item label="支付时间">{{
                tabledata.paymentTime
              }}</el-descriptions-item>

              <el-descriptions-item label="申请时间">{{
                tabledata.refundTime
              }}</el-descriptions-item>
            </el-descrip>
          </div>

          <!-- 待派单已退款 -->

          <div v-if="show4" style="width: 990px;">
            <el-steps :space="165" :active="6">
              <el-step title="待支付"></el-step>

              <el-step title="待派单"></el-step>

              <el-step title="已退款"></el-step>
            </el-steps>

            <el-descriptions class="bonten" :column="6" direction="vertical">
              <el-descriptions-item label="创建时间">{{
                tabledata.createTimeOrder
              }}</el-descriptions-item>

              <el-descriptions-item label="支付时间">{{
                tabledata.paymentTime
              }}</el-descriptions-item>

              <el-descriptions-item label="退款时间">{{
                orderChangeTimeer
              }}</el-descriptions-item>
            </el-descriptions>
          </div>

          <!-- 已派单已取消 -->

          <div v-if="show5" style="width: 990px;">
            <el-steps :space="165" :active="8">
              <el-step title="待支付"></el-step>

              <el-step title="待派单"></el-step>

              <el-step title="已派单"></el-step>

              <el-step title="已取消"></el-step>
            </el-steps>

            <el-descriptions class="bonten" :column="6" direction="vertical">
              <el-descriptions-item label="创建时间">{{
                tabledata.createTimeOrder
              }}</el-descriptions-item>

              <el-descriptions-item label="支付时间">{{
                tabledata.paymentTime
              }}</el-descriptions-item>

              <el-descriptions-item label="派单时间">{{
                orderChangeTimes
              }}</el-descriptions-item>

              <el-descriptions-item label="取消时间">{{
                orderTimes
              }}</el-descriptions-item>
            </el-descriptions>
          </div>

          <!-- 已派单退款中 -->

          <div v-if="show6" style="width: 990px;">
            <el-steps :space="165" :active="9">
              <el-step title="待支付"></el-step>

              <el-step title="待派单"></el-step>

              <el-step title="已派单"></el-step>

              <el-step title="退款中"></el-step>
            </el-steps>

            <el-descriptions class="bonten" :column="6" direction="vertical">
              <el-descriptions-item label="创建时间">{{
                tabledata.createTimeOrder
              }}</el-descriptions-item>

              <el-descriptions-item label="支付时间">{{
                tabledata.paymentTime
              }}</el-descriptions-item>

              <el-descriptions-item label="派单时间">{{
                orderChangeTimes
              }}</el-descriptions-item>

              <el-descriptions-item label="申请时间">{{
                tabledata.refundTime
              }}</el-descriptions-item>
            </el-descriptions>
          </div>

          <!-- 已派单已退款 -->

          <div v-if="show7" style="width: 990px;">
            <el-steps :space="165" :active="10">
              <el-step title="待支付"></el-step>

              <el-step title="待派单"></el-step>

              <el-step title="已派单"></el-step>

              <el-step title="已退款"></el-step>
            </el-steps>

            <el-descriptions class="bonten" :column="6" direction="vertical">
              <el-descriptions-item label="创建时间">{{
                tabledata.createTimeOrder
              }}</el-descriptions-item>

              <el-descriptions-item label="支付时间">{{
                tabledata.paymentTime
              }}</el-descriptions-item>

              <el-descriptions-item label="派单时间">{{
                orderChangeTimes
              }}</el-descriptions-item>

              <el-descriptions-item label="退款时间">{{
                orderChangeTimeer
              }}</el-descriptions-item>
            </el-descriptions>
          </div>

          <!-- 待服务已取消 -->

          <div v-if="show8" style="width: 990px;">
            <el-steps :space="165" :active="11">
              <el-step title="待支付"></el-step>

              <el-step title="待派单"></el-step>

              <el-step title="已派单"></el-step>

              <el-step title="待服务"></el-step>

              <el-step title="已取消"></el-step>
            </el-steps>

            <el-descriptions class="bonten" :column="6" direction="vertical">
              <el-descriptions-item label="创建时间">{{
                tabledata.createTimeOrder
              }}</el-descriptions-item>

              <el-descriptions-item label="支付时间">{{
                tabledata.paymentTime
              }}</el-descriptions-item>

              <el-descriptions-item label="派单时间">{{
                orderChangeTimes
              }}</el-descriptions-item>

              <el-descriptions-item label="服务时间">{{
                tabledata.serviceStartTime
              }}</el-descriptions-item>

              <el-descriptions-item label="取消时间">{{
                orderTimes
              }}</el-descriptions-item>
            </el-descriptions>
          </div>

          <!-- 待服务退款中 -->

          <div v-if="show9" style="width: 990px;">
            <el-steps :space="165" :active="11">
              <el-step title="待支付"></el-step>

              <el-step title="待派单"></el-step>

              <el-step title="已派单"></el-step>

              <el-step title="待服务"></el-step>

              <el-step title="退款中"></el-step>
            </el-steps>

            <el-descriptions class="bonten" :column="6" direction="vertical">
              <el-descriptions-item label="创建时间">{{
                tabledata.createTimeOrder
              }}</el-descriptions-item>

              <el-descriptions-item label="支付时间">{{
                tabledata.paymentTime
              }}</el-descriptions-item>

              <el-descriptions-item label="派单时间">{{
                orderChangeTimes
              }}</el-descriptions-item>

              <el-descriptions-item label="服务时间">{{
                tabledata.serviceStartTime
              }}</el-descriptions-item>

              <el-descriptions-item label="申请时间">{{
                tabledata.refundTime
              }}</el-descriptions-item>
            </el-descriptions>
          </div>

          <!-- 待服务已退款 -->

          <div v-if="show10" style="width: 990px;">
            <el-steps :space="165" :active="11">
              <el-step title="待支付"></el-step>

              <el-step title="待派单"></el-step>

              <el-step title="已派单"></el-step>

              <el-step title="待服务"></el-step>

              <el-step title="已退款"></el-step>
            </el-steps>

            <el-descriptions class="bonten" :column="6" direction="vertical">
              <el-descriptions-item label="创建时间">{{
                tabledata.createTimeOrder
              }}</el-descriptions-item>

              <el-descriptions-item label="支付时间">{{
                tabledata.paymentTime
              }}</el-descriptions-item>

              <el-descriptions-item label="派单时间">{{
                orderChangeTimes
              }}</el-descriptions-item>

              <el-descriptions-item label="服务时间">{{
                tabledata.serviceStartTime
              }}</el-descriptions-item>

              <el-descriptions-item label="退款时间">{{
                orderChangeTimeer
              }}</el-descriptions-item>
            </el-descriptions>
          </div>

          <!-- 待服务已退款 -->

          <div v-if="show12" style="width: 990px;">
            <el-steps :space="165" :active="18">
              <el-step title="待预约"></el-step>

              <!-- <el-step title="已完成"></el-step> -->
            </el-steps>

            <el-descriptions class="bonten" :column="6" direction="vertical">
              <el-descriptions-item label="创建时间">{{
                tabledata.createTimeOrder
              }}</el-descriptions-item>

              <!-- <el-descriptions-item label="完成时间">{{

                tabledata.completeTime

              }}</el-descriptions-item> -->
            </el-descriptions>
          </div>

          <!-- 主体 -->

          <div v-if="bonten" style="width: 990px;">
            <el-steps :space="165" :active="active">
              <el-step title="待支付"></el-step>

              <el-step title="已取消" v-show="showfist"></el-step>

              <el-step title="待派单"></el-step>

              <el-step title="已取消" v-show="showfist"></el-step>

              <el-step title="退款中" v-show="showfist"></el-step>

              <el-step title="已退款" v-show="showfist"></el-step>

              <el-step title="已派单"></el-step>

              <el-step title="已取消" v-show="showfist"></el-step>

              <el-step title="退款中" v-show="showfist"></el-step>

              <el-step title="已退款" v-show="showfist"></el-step>

              <el-step title="待服务"></el-step>

              <el-step title="已取消" v-show="showfist"></el-step>

              <el-step title="退款中" v-show="showfist"></el-step>

              <el-step title="已退款" v-show="showfist"></el-step>

              <el-step title="待评价"></el-step>

              <el-step title="已完结"></el-step>
            </el-steps>

            <el-descriptions class="bonten1" :column="6" direction="vertical">
              <el-descriptions-item label="创建时间">{{
                tabledata.createTimeOrder
              }}</el-descriptions-item>

              <el-descriptions-item label="支付时间">{{
                tabledata.paymentTime
              }}</el-descriptions-item>

              <el-descriptions-item label="派单时间">{{
                orderChangeTimes
              }}</el-descriptions-item>

              <el-descriptions-item label="服务时间">{{
                tabledata.serviceStartTime
              }}</el-descriptions-item>

              <el-descriptions-item label="完成时间">{{
                tabledata.completeTime
              }}</el-descriptions-item>

              <el-descriptions-item label="评价时间">{{
                tabledata.evaluateTime
              }}</el-descriptions-item>
            </el-descriptions>
          </div>
        </div>

        <!-- 用户评价 -->
        <div class="entirety" v-if="goodsType == 0">
          <p class="fist">用户评价</p>
          <el-descriptions class="margin-top" :column="4" direction="vertical" v-for="(item, index) in list" :key="index">
            <el-descriptions-item :label="item.qaQuestion === null ? '无' : item.qaQuestion">用户:{{ item.qaAnswers }}</el-descriptions-item>
            <el-descriptions-item :label="
                item.satisfactionQuestion === null
                  ? '无'
                  : item.satisfactionQuestion
              ">用户:{{ item.satisfactionAnswer }}</el-descriptions-item>
          </el-descriptions>
        </div>

        <!-- 服务地址信息 -->
        <div class="entirety">
          <p class="fist">服务地址信息</p>
          <el-descriptions>
            <el-descriptions-item label="联系人:">{{
              tabledata.receiverName
            }}</el-descriptions-item>
            <el-descriptions-item label="服务时间:">{{
              tabledata.serviceStartTime
            }}</el-descriptions-item>
            <el-descriptions-item label="服务地址:">{{
              tabledata.address
            }}</el-descriptions-item>
            <el-descriptions-item label="联系电话:">{{
              tabledata.receiverMobile
            }}</el-descriptions-item>
            <el-descriptions-item label="用户备注:">{{
              tabledata.buyerRemark == null ? "无" : tabledata.buyerRemark
            }}</el-descriptions-item>
            <el-descriptions-item label="会员信息:">{{
              tabledata.nickname
            }}</el-descriptions-item>
          </el-descriptions>
        </div>

        <!-- 服务人员信息 -->
        <div class="entirety" v-if="showPrise1" v-show="list1.length > 0">
          <p class="fist">服务人员信息</p>
          <div class="Personnel" v-for="(item1, index1) in list1" :key="index1">
            <div class="left">
              <img :src="item1.comStaffBasicInfo.avatarAddress" style="width: 100px; height: 100px" />
            </div>
            <div class="right">
              <p>
                姓名: {{ item1.comStaffBasicInfo.realName }} 好评率{{
                  item1.comStaffBasicInfo.praiseRate
                }}%
              </p>
              <p style="margin-top: 10px;">
                手机号: {{ item1.comStaffBasicInfo.phone }}
              </p>
              <div>
                <span>工单编号: {{ item1.workOrderNo }}</span>
                <el-button style="color: #fc9e76;" type="text" @click="buens(item1.workOrderNo)">查看工单</el-button>
              </div>
            </div>
          </div>
          <el-button v-if="list1.length == 2" style="background-color:#fd804c;color: #fff;margin-top: 15px;" @click="examine">查看全部服务</el-button>
        </div>

        <!-- 订单信息 -->
        <div class="entirety">
          <p class="centon">
            <span class="fist">订单信息</span>
            <el-button style="background-color:#fd804c;color: #fff;margin-left: 10px;" size="small" v-show="cancel" @click="canceldialogVisible = true">取消订单</el-button>
            <el-button style="background-color:#fd804c;color: #fff;margin-left: 10px;" size="small" v-if="agreed" @click="agreedialogVisible = true">同意退款</el-button>
          </p>
          <el-descriptions>
            <el-descriptions-item label="订单编号:">{{
              orderNo
            }}</el-descriptions-item>
            <el-descriptions-item label="支付方式:" v-if="paymemtTerm == 0">
              {{
                paymentMethod == 1
                  ? "微信"
                  : paymentMethod == 2
                  ? "支付宝"
                  : paymentMethod == 3
                  ? "云闪付"
                  : paymentMethod == 4
                  ? "快捷支付"
                  : paymentMethod == null
                  ? "无"
                  : ""
              }}
            </el-descriptions-item>
            <el-descriptions-item label="实收金额:" v-if="paymemtTerm == 0">{{
                active == 1 || active == 2 || active == 17 ? 0 : paymentAmount
              }}元</el-descriptions-item>
            <el-descriptions-item label="来源渠道:">{{
              tabledata.orderSource
            }}</el-descriptions-item>
            <el-descriptions-item label="订单创建时间:" v-if="paymemtTerm == 1">{{ tabledata.createTimeOrder }}</el-descriptions-item>
            <el-descriptions-item label="支付单号:" v-if="paymemtTerm == 0">{{
              paySerialId == null ? "无" : paySerialId
            }}</el-descriptions-item>
            <!-- <el-descriptions-item label="服务总时长:" v-if="paymemtTerm==1">{{
              tabledata.sumTime
            }}</el-descriptions-item> -->
            <!-- <el-descriptions-item label="服务次数:" v-if="paymemtTerm==1">{{
                serviceFrequency == null ? "1" : serviceFrequency
              }}次</el-descriptions-item> -->
            <el-descriptions-item label="支付时间:" v-if="paymemtTerm == 0">{{
              tabledata.paymentTime == null ? "无" : tabledata.paymentTime
            }}</el-descriptions-item>
            <!-- <el-descriptions-item v-if="service" label="服务人数:">{{
              tabledata.servicePopulation
            }}</el-descriptions-item> -->
            <!-- <el-descriptions-item v-if="cancels" label="取消原因:">{{
              cancelReason == null ? "无" : cancelReason
            }}</el-descriptions-item> -->
          </el-descriptions>
          <div class="text"></div>
        </div>

        <!--优惠信息-->
        <div class="entirety" v-if="list3 !== null">
          <p class="fist">优惠信息</p>
          <el-descriptions v-for="(item3, index3) in list3" :key="index3">
            <el-descriptions-item label="优惠券名称:">{{
              item3.couponTitle == null ? "无" : item3.couponTitle
            }}</el-descriptions-item>
            <el-descriptions-item label="活动名称:">无</el-descriptions-item>
            <el-descriptions-item label="加急件:">{{
              adjustType == 1 ? "加价" : adjustType == 2 ? "减价" : "无"
            }}</el-descriptions-item>
            <el-descriptions-item label="减免金额:">{{
              item3.discountAmount == null ? "无" : item3.discountAmount
            }}</el-descriptions-item>
            <el-descriptions-item label="减免金额:">无</el-descriptions-item>
            <el-descriptions-item label="加价金额:">{{
              adjustAmount == null ? "无" : adjustAmount
            }}</el-descriptions-item>
          </el-descriptions>
          <div class="text"></div>
        </div>

        <!-- 退款信息 -->
        <div class="entirety" v-if="memRefundOrders!=null">
          <p class="fist">退款信息</p>
          <el-descriptions>
            <el-descriptions-item label="退款编号:">{{refundNo==null?'无':refundNo}}</el-descriptions-item>
            <el-descriptions-item label="产生退改费次数:">{{ frequency==null?'0':frequency}} 次</el-descriptions-item>
            <el-descriptions-item label="退款时间">{{ refundTime==null?'无':refundTime}}</el-descriptions-item>
            <el-descriptions-item label="退款金额:">{{ tempRefundAmount==null?'0':tempRefundAmount}} 元</el-descriptions-item>
            <el-descriptions-item label="正常退款次数:">{{ numberOfNormalRefunds==null?'0':numberOfNormalRefunds}} 次</el-descriptions-item>
            <el-descriptions-item label="退款原因:">{{ cancelReason==null?'无':cancelReason}}</el-descriptions-item>
            <el-descriptions-item label="临时退款费用扣除:">{{ refundFeeAmount==null?'0':refundFeeAmount}} 元</el-descriptions-item>
          </el-descriptions>
        </div>

        <!-- 账单信息 -->
        <div class="entirety" v-if="paymemtTerm == 1">
          <p class="fist">账单信息</p>
          <el-table :data="list5" style="width: 100%">
            <el-table-column prop="billNum" label="账单月">
              <template slot-scope="scope">
                <div>第 {{ scope.row.billNum }} 月</div>
              </template>
            </el-table-column>
            <el-table-column prop="paymentAmount" label="支付金额(元)">
            </el-table-column>
            <el-table-column prop="discountAmount" label="优惠金额(元)">
            </el-table-column>
            <el-table-column prop="paymentMethod" label="支付方式">
              <template slot-scope="scope">
                <div v-if="scope.row.paymentMethod == 1">微信</div>
                <div v-if="scope.row.paymentMethod == 2">支付宝</div>
                <div v-if="scope.row.paymentMethod == 3">云闪付</div>
                <div v-if="scope.row.paymentMethod == 4">快捷支付</div>
              </template>
            </el-table-column>
            <el-table-column prop="paymentTime" label="支付时间">
            </el-table-column>
            <el-table-column prop="paymentStatus" label="支付状态">
              <template slot-scope="scope">
                <div v-if="scope.row.paymentStatus == 0">未支付</div>
                <div v-if="scope.row.paymentStatus == 1">已支付</div>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <!-- 附赠专项信息 -->
        <div class="entirety" v-if="list4!=null">
          <p class="fist">附赠专项信息</p>
          <el-table :data="list4" style="width: 100%">
            <el-table-column prop="goodsTitle" label="归属套餐/商品">
            </el-table-column>
            <el-table-column prop="areaNames" label="归属区域">
            </el-table-column>
            <el-table-column prop="subClassifyName" label="归属分类">
            </el-table-column>
            <el-table-column prop="skuName" label="规格名称"> </el-table-column>
            <el-table-column prop="craftName" label="工艺类型">
            </el-table-column>
            <el-table-column prop="numUnit" label="数量"> </el-table-column>
            <el-table-column prop="duration" label="服务时长">
            </el-table-column>
          </el-table>
        </div>

        <!-- 服务类别 -->
        <div class="entirety">
          <p class="fist">服务商品明细</p>
          <el-table :data="list2" style="width: 100%">
            <el-table-column prop="goodsTitle" label="归属套餐/商品">
            </el-table-column>
            <el-table-column prop="areaNames" label="归属区域">
            </el-table-column>
            <el-table-column prop="subClassifyName" label="归属分类">
            </el-table-column>
            <el-table-column prop="skuName" label="规格名称"> </el-table-column>
            <el-table-column prop="craftName" label="工艺类型">
            </el-table-column>
            <el-table-column prop="goodsType" label="商品类型">
              <template slot-scope="scope">
                <div>
                  {{
                    scope.row.goodsType == 0
                      ? "单项商品"
                      : scope.row.goodsType == 1
                      ? "保洁体验卡"
                      : scope.row.goodsType == 2
                      ? "家务师体验卡"
                      : scope.row.goodsType == 3
                      ? "保洁周期卡"
                      : scope.row.goodsType == 4
                      ? "家务师周期卡"
                      : scope.row.goodsType == null
                      ? "单项商品"
                      : scope.row.goodsType
                  }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="numUnit" label="数量"> </el-table-column>
            <el-table-column prop="duration" label="服务时长">
            </el-table-column>
          </el-table>
        </div>

        <!-- 同意退款dialog -->
        <el-dialog title="同意退款" :visible.sync="agreedialogVisible" width="30%">
          <span>是否确定同意该笔退款</span>
          <span slot="footer" class="dialog-footer">
            <el-button @click="agreedialogVisible = false">取 消</el-button>
            <el-button style="background-color:#fd804c;color: #fff;" @click="agreeOrder">确 定</el-button>
          </span>
        </el-dialog>

        <!-- 取消订单dialog -->
        <el-dialog title="取消订单" :visible.sync="canceldialogVisible" width="400px">
          <el-form :model="form">
            <el-form-item>
              <el-select v-model="form.reason" placeholder="请选择取消原因">
                <el-option label="联系不上买家了" value="联系不上买家了"></el-option>
                <el-option label="买家误拍或重拍了" value="买家误拍或重拍了"></el-option>
                <el-option label="买家没有诚意完成购买" value="买家没有诚意完成购买"></el-option>
                <el-option label="其他" value="4"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-input type="textarea" v-model="form.desc" placeholder="请输入其他内容"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="canceldialogVisible = false">取 消</el-button>
            <el-button style="background-color:#fd804c;color: #fff;" @click="cancelOrder">确 定</el-button>
          </div>
        </el-dialog>

        <!-- 查看dialog -->
        <el-dialog title="所有服务" :visible.sync="examinedialogVisible" width="900px" :modal="false" style="height:500px;">
          <div class="examine">
            <div class="Personnel" v-for="(item1, index3) in listfist" :key="index3">
              <div class="left">
                <img :src="item1.comStaffBasicInfo.avatarAddress" style="width: 100px; height: 100px" />
              </div>
              <div class="right">
                <p>
                  姓名: {{ item1.comStaffBasicInfo.realName }} 好评率{{
                    item1.comStaffBasicInfo.praiseRate
                  }}%
                </p>
                <p style="margin-top: 10px;">
                  手机号: {{ item1.comStaffBasicInfo.phone }}
                </p>
                <div>
                  <span>工单编号: {{ item1.workOrderNo }}</span>
                  <el-button style="color: #fc9e76;" type="text" @click="buens(item1.workOrderNo)">查看工单</el-button>
                </div>
              </div>
            </div>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "orderdetails",

  data () {
    return {
      list: [],

      list1: [],

      list2: [],

      list3: [],

      list4: [],

      list5: [],

      listfist: [],

      tabledata: [],

      orderTimes: "",

      goodsType: "",

      listlength: "",

      active: 0, //订单进度

      orderNo: "", //订单号

      orderStatus: "", //订单进度

      orderChangeTimes: "", //派单时间

      orderChangeTimeer: "", //退款时间

      paymentMethod: "", //支付方式

      paySerialId: "", //支付单号

      cancelReason: "", //取消原因

      paymentAmount: "", //实收金额

      adjustType: "", //调整类型

      adjustAmount: "", //调整金额

      serviceFrequency: "", //服务次数

      form: {
        reason: "",

        desc: ""
      },
      frequency: '',
      refundTime: '',
      paymemtTerm: '',
      tempRefundAmount: '',
      refundFeeAmount: '',
      memRefundOrders: '',
      refundNo: '',
      numberOfNormalRefunds: '',
      showfist: false,

      showPrise1: false, //服务人员信息

      cancel: true, //取消订单

      service: false, //服务人数

      cancels: false, //取消原因

      bonten: true, //主体

      agreed: false, //同意退款

      show1: false, //待支付已取消

      show2: false, //待派单已取消

      show3: false, //待派单退款中

      show4: false, //待派单已退款

      show5: false, //已派单已取消

      show6: false, //已派单退款中

      show7: false, //已派单已退款

      show8: false, //待服务已取消

      show9: false, //待服务退款中

      show10: false, //待服务已退款

      show12: false, //待服务待预约

      show11: false, //待支付已关闭

      agreedialogVisible: false, //同意退款

      canceldialogVisible: false, //取消订单

      examinedialogVisible: false
    };
  },

  created () {
    this.query();
  },

  methods: {
    //订单列表

    query () {
      const orderNo = this.$route.query.orderNo;

      this.$http({
        url: "/hssorderadmin/order/memOrder/OrderByNo",

        method: "get",

        params: {
          orderNo
        }
      }).then(data => {
        console.log(data.data.paymemtTerm, "订单接口");

        this.tabledata = data.data;

        this.paymemtTerm = data.data.paymemtTerm;
        this.memRefundOrders = data.data.memRefundOrders;
        this.active = data.data.orderStatus;

        this.orderNo = data.data.orderNo;

        this.paymentMethod = data.data.paymentMethod;

        this.paySerialId = data.data.paySerialId;

        this.cancelReason = data.data.cancelReason;

        this.paymentAmount = data.data.paymentAmount;

        this.adjustType = data.data.adjustType;

        this.adjustAmount = data.data.adjustAmount;

        this.frequency = data.data.frequency;

        this.refundTime = data.data.refundTime;

        this.tempRefundAmount = data.data.tempRefundAmount;
        this.refundFeeAmount = data.data.refundFeeAmount;
        this.refundNo = data.data.refundNo;
        this.numberOfNormalRefunds = data.data.numberOfNormalRefunds;
        this.serviceFrequency = data.data.serviceFrequency;

        this.list = data.data.memOrderComments;

        // this.listlength = data.data.memOrderComments.length;

        this.list2 = data.data.orderGoodsInfo;

        this.list3 = data.data.sysCouponTemplates;

        this.list4 = data.data.orderGoodsInfoList;

        this.list5 = data.data.memOrderBills;

        const orderChangeTimes = data.data.memOrderChangeLogs.filter(
          i => i.orderStatus == 3
        );

        const orderChangeTimeer = data.data.memOrderChangeLogs.filter(
          i => i.orderStatus == 10
        );

        const orderTimes = data.data.memOrderChangeLogs.filter(
          i => i.orderStatus == 8 || i.orderStatus == 9
        ); //已取消

        this.orderChangeTimes = orderChangeTimes

          .map(e => e.orderChangeTime)

          .toString();

        this.orderChangeTimeer = orderChangeTimeer

          .map(e => e.orderChangeTime)

          .toString();

        this.orderTimes = orderTimes.map(e => e.orderChangeTime).toString();

        if (data.data.staffsVos !== null) {
          if (data.data.staffsVos.length == 1) {
            this.list1 = data.data.staffsVos;
          } else {
            this.listfist = data.data.staffsVos;

            this.list1 = data.data.staffsVos.slice(0, 2);

            // this.listfist = data.data.staffsVos.slice(2)
          }
        }

        this.list2.forEach(e => {
          this.goodsType = e.goodsType;
        });

        this.finsh();
      });
    },

    //取消订单接口

    body () {
      this.$http({
        url: "/hssorderadmin/order/memOrder/cancelOrder",

        method: "get",

        params: {
          orderNo: this.$route.query.orderNo,

          state: this.active,

          cancelReason:
            this.form.reason == "4" ? this.form.desc : this.form.reason
        }
      }).then(res => {
        console.log(res, "取消订单");

        if (res) {
          // 取消订单成功  刷新页面

          if (res.data) {
            this.$message.error(res.data);

            var that = this;

            setTimeout(function () {
              that.$router.go(0);
            }, 1000);
          } else {
            this.$router.go(0);
          }
        }
      });
    },

    //同意退款接口

    refund () {
      this.$http({
        url: "/hssorderadmin/order/memOrder/agreeRefund",

        method: "POST",

        data: {
          paySerialId: this.paySerialId,

          state: this.active,

          cancelReason: this.cancelReason,

          paymentAmount: this.paymentAmount
        }
      }).then(res => {
        //console.log(res, '同意退款')

        location.reload();

        this.$message({
          message: "同意退款成功",

          type: "success"
        });
      });
    },

    //取消订单

    cancelOrder () {
      this.canceldialogVisible = false;

      if (this.active === 1) {
        this.show1 = true;

        this.bonten = false;

        this.cancel = false;
      } else if (this.active === 3) {
        this.show2 = true;

        this.bonten = false;

        this.cancel = false;
      } else if (this.active === 7) {
        this.show5 = true;

        this.bonten = false;

        this.cancel = false;
      } else if (this.active === 11) {
        this.show8 = true;

        this.bonten = false;

        this.cancel = false;
      }

      this.body();
    },

    //同意退款

    agreeOrder () {
      this.agreedialogVisible = false;

      if (this.active === 4) {
        this.show3 = true;

        this.show2 = false;
      } else if (this.active === 5) {
        this.show4 = true;

        this.show3 = false;

        this.agreed = false;

        this.bonten = false;

        this.cancel = false;
      } else if (this.active === 8) {
        this.show4 = false;

        this.bonten = false;

        this.cancel = false;
      } else if (this.active === 9) {
        this.show7 = true;

        this.show6 = false;

        this.agreed = false;

        this.bonten = false;

        this.cancel = false;
      } else if (this.active === 13) {
        this.show10 = true;

        this.show9 = false;

        this.agreed = false;

        this.bonten = false;

        this.cancel = false;
      }

      this.refund();
    },

    //状态

    finsh () {
      if (this.active === 2) {
        this.show1 = true;

        this.cancel = false;

        this.cancels = true;

        this.bonten = false;
      } else if (this.active === 3) {
        this.service = true;
      } else if (this.active === 4) {
        this.show2 = true;

        this.service = true;

        this.cancel = false;

        this.bonten = false;
      } else if (this.active === 5) {
        this.show3 = true;

        this.agreed = true;

        this.service = true;

        this.cancel = false;

        this.bonten = false;
      } else if (this.active === 6) {
        this.show4 = true;

        this.service = true;

        this.cancel = false;

        this.bonten = false;
      } else if (this.active === 7) {
        this.service = true;

        this.showPrise1 = true;
      } else if (this.active === 8) {
        this.show5 = true;

        this.service = true;

        this.cancel = false;

        this.bonten = false;

        this.showPrise1 = true;
      } else if (this.active === 9) {
        this.show6 = true;

        this.agreed = true;

        this.service = true;

        this.showPrise1 = true;

        this.cancel = false;

        this.bonten = false;
      } else if (this.active === 10) {
        this.show7 = true;

        this.service = true;

        this.showPrise1 = true;

        this.cancel = false;

        this.bonten = false;
      } else if (this.active === 11) {
        this.showPrise1 = true;

        this.service = true;
      } else if (this.active === 12) {
        this.show8 = true;

        this.showPrise1 = true;

        this.cancels = true;

        this.cancel = false;

        this.bonten = false;
      } else if (this.active === 13) {
        this.show9 = true;

        this.agreed = true;

        this.cancels = true;

        this.showPrise1 = true;

        this.cancel = false;

        this.bonten = false;
      } else if (this.active === 14) {
        this.show10 = true;

        this.cancel = false;

        this.cancels = true;

        this.showPrise1 = true;

        this.bonten = false;
      } else if (this.active === 15) {
        this.cancel = false;

        this.service = true;

        this.showPrise1 = true;
      } else if (this.active === 16) {
        this.cancel = false;

        // this.showPrise = true;

        this.service = true;

        this.showPrise1 = true;
      } else if (this.active === 17) {
        this.bonten = false;

        this.cancel = false;

        this.cancels = true;

        this.show11 = true;
      } else if (this.active === 18) {
        this.bonten = false;

        this.cancel = true;

        this.cancels = true;

        this.show12 = true;

        this.showPrise1 = true;
      }
    },

    //查看

    examine () {
      this.examinedialogVisible = true;
    },

    //查看工单

    buens (workOrderNo) {
      this.$router.push({
        path: "/workorderdetails",

        query: {
          workOrderNo
        }
      });
    }
  },

  activated () {
    if (!localStorage.getItem("order_hover_num")) {
      localStorage.setItem("order_hover_num", 1);

      window.location.reload();
    }
  },

  deactivated () {
    localStorage.removeItem("order_hover_num");
  }
};
</script>

<style lang="scss" scoped>
.hander {
  width: 100%;

  height: 50px;

  line-height: 50px;

  font-size: 20px;

  font-weight: 900;
}

.orderList {
  background-color: #ebeef1;

  padding-right: 32px;

  padding-top: 1px;

  padding-bottom: 1px;

  display: block;

  border-radius: 20px;

  list-style-type: none;
}

.herdertop {
  height: 8vh;

  display: flex;

  align-items: center;

  padding: 0 20px;

  box-sizing: border-box;
}

.topImg {
  margin-right: 20px;
}

.entirety {
  width: 100%;

  margin: 10px;

  height: 100%;

  background-color: #fff;

  border-radius: 10px;

  padding-left: 10px;

  padding-top: 10px;

  overflow: hidden;

  // display: flex;

  // flex-direction: column;

  // align-items: center;
}

.fist {
  font-size: 16px;

  margin-bottom: 15px;
}

.Personnel {
  display: flex;

  float: left;

  margin-bottom: 5px;

  .right {
    display: flex;

    font-size: 14px;

    flex-direction: column;

    align-items: flex-start;

    justify-content: space-around;

    margin-left: 8px;

    margin-right: 10px;
  }
}

.examine {
  overflow: hidden;
}

/deep/ .el-descriptions__body {
  margin-top: 5px;
}

/deep/ .el-steps {
  .el-step {
    flex-basis: 177px;

    width: 165px;
  }
}

/deep/ .el-dialog__body {
  padding-top: 0px;
}

/deep/ .el-descriptions-item__label.has-colon::after {
  content: "";
}
</style>
